<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>练习页面</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<div class="header">
		<!--Content before waves-->
		<div class="inner-header flex">
			<h1>前端开发课堂练习集</h1>
			<i class="material-icons">view_quilt</i>
		</div>

		<!--Waves Container-->
		<div>
			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 24 200 28" preserveAspectRatio="none" shape-rendering="auto">
				<defs>
					<path id="gentle-wave"
						d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.1)" />
					<use xlink:href="#gentle-wave" x="48" y="9" fill="#fff" />
				</g>
			</svg>
		</div>
		<!--Waves end-->

	</div>
	<!--Header ends-->

	<!--Content starts-->
	<div class="content flex">
		<div class="cont s--inactive">
			<!-- cont inner start -->
			<div class="cont__inner">
			  <!-- el start -->
			  <div class="el">
				<div class="el__overflow">
				  <div class="el__inner">
					<div class="el__bg"></div>
					<div class="el__preview-cont">
					  <h2 class="el__heading">Section 1</h2>
					</div>
					<div class="el__content">
					  <div class="el__text">Whatever</div>
					  <div class="el__close-btn"></div>
					</div>
				  </div>
				</div>
				<div class="el__index">
				  <div class="el__index-back">1</div>
				  <div class="el__index-front">
					<div class="el__index-overlay" data-index="1">1</div>
				  </div>
				</div>
			  </div>
			  <!-- el end -->
			  <!-- el start -->
			  <div class="el">
				<div class="el__overflow">
				  <div class="el__inner">
					<div class="el__bg"></div>
					<div class="el__preview-cont">
					  <h2 class="el__heading">Section 2</h2>
					</div>
					<div class="el__content">
					  <div class="el__text">Whatever</div>
					  <div class="el__close-btn"></div>
					</div>
				  </div>
				</div>
				<div class="el__index">
				  <div class="el__index-back">2</div>
				  <div class="el__index-front">
					<div class="el__index-overlay" data-index="2">2</div>
				  </div>
				</div>
			  </div>
			  <!-- el end -->
			  <!-- el start -->
			  <div class="el">
				<div class="el__overflow">
				  <div class="el__inner">
					<div class="el__bg"></div>
					<div class="el__preview-cont">
					  <h2 class="el__heading">Section 3</h2>
					</div>
					<div class="el__content">
					  <div class="el__text">Whatever</div>
					  <div class="el__close-btn"></div>
					</div>
				  </div>
				</div>
				<div class="el__index">
				  <div class="el__index-back">3</div>
				  <div class="el__index-front">
					<div class="el__index-overlay" data-index="3">3</div>
				  </div>
				</div>
			  </div>
			  <!-- el end -->
			  <!-- el start -->
			  <div class="el">
				<div class="el__overflow">
				  <div class="el__inner">
					<div class="el__bg"></div>
					<div class="el__preview-cont">
					  <h2 class="el__heading">Section 4</h2>
					</div>
					<div class="el__content">
					  <div class="el__text">Whatever</div>
					  <div class="el__close-btn"></div>
					</div>
				  </div>
				</div>
				<div class="el__index">
				  <div class="el__index-back">4</div>
				  <div class="el__index-front">
					<div class="el__index-overlay" data-index="4">4</div>
				  </div>
				</div>
			  </div>
			  <!-- el end -->
			  <!-- el start -->
			  <div class="el">
				<div class="el__overflow">
				  <div class="el__inner">
					<div class="el__bg"></div>
					<div class="el__preview-cont">
					  <h2 class="el__heading">Section 5</h2>
					</div>
					<div class="el__content">
					  <div class="el__text">Whatever</div>
					  <div class="el__close-btn"></div>
					</div>
				  </div>
				</div>
				<div class="el__index">
				  <div class="el__index-back">5</div>
				  <div class="el__index-front">
					<div class="el__index-overlay" data-index="5">5</div>
				  </div>
				</div>
			  </div>
			  <!-- el end -->
			</div>
			<!-- cont inner end -->
		  </div>
		  
		  <a href="https://dribbble.com/shots/2802024-Satellite-Website-Prototype" target="_blank" class="icon-link">
			<img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
		  </a>
		  <a href="https://twitter.com/NikolayTalanov" target="_blank" class="icon-link icon-link--twitter">
			<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
		  </a>
	</div>
	<!--Content ends-->
</body>

</html>